<template>
	<view>
		<!-- #ifndef MP -->
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<!-- #endif -->
		<view class="content">
			<view class="acea-row row-top row-between title">
				<view class="">
					<view class="title-black">在商和铺你想做什么</view>
					<view class="title-gray">根据你的需求推荐更合适的内容</view>
				</view>
				<view class="statistics">
					...
				</view>
			</view>
			<view class="type-bg acea-row row-middle row-between" style="width: 100%;">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					show-scrollbar="true" :scroll-left="tabRight">
					<view class="type" :style='"min-width:"+widthIng+"px"' :class="typeOn==index?'type-on':''"
						v-for="(item,index) in types" :key="index" @click="typeNavClick(item,index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="acea-row row-top row-between item" v-for="(item,index) in UserMatchlist" :key="index">
				<view>

					<view class="itemCon">
						<view class="item_title" @click="toAddMatch(item)">{{ item.title }}</view>
						<u-icon v-if="item.isSelected == 1" name="minus-circle" color="red" size="18" class="item_icon"
							@click="delData(item)" />
					</view>
					<!-- 			<view class="item_title">{{ item.title }}
					</view> -->
					<view class="info">{{ item.workingGroupName ? item.workingGroupName: '' }}</view>
				</view>
				<!-- @click="toPage('/pages/releases/expectedEvent/expectedEvent?item='+ JSON.stringify(item))" -->
				<view class="item_icon sanjiao-right"></view>
			</view>

			<!-- 暂未启用 -->
			<!-- 			<view class="add_btn" @click="toPage('/pages/releases/expectedEvent/expectedEvent')">
				编辑当前模板
			</view> -->
		</view>
		<view v-if="UserMatchlist.length<1" style="text-align: center;color: #999;margin-top: 20rpx;">暂无数据</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getActiveTemplate,
		DelUserMatch,
		AllListApi
	} from '@/api/template.js'

	import {
		OnListApi,
		onBuyListApi,
		getOnGroupListApi,
	} from '@/api/subletOfShop.js'
	import {
		getCategory,
		toPage,
		showLoading
	} from '@/filters/commFilter.js'
	import {
		getSuppleOnList,
		getSuppleBegOnList,
		getProduct
	} from "@/api/api.js";
	import {
		UserMatchlistApi
	} from '@/api/template.js'
	import {
		getObjectListApi,
		getOnJobApi,
		getOnRecruitApi
	} from '@/api/recruit.js'
	import {
		OnMerchantApi
	} from '@/api/service.js'
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				UserMatchlist: [],
				types: [{
						name: '全部',
						type: 'all'
					}, {
						name: '出租',
						type: 'jy',
						status: '0'
					},
					{
						name: '出售',
						type: 'jy',
						status: '1'
					},
					{
						name: '转让',
						type: 'jy',
						status: '2'
					}, {
						name: '求租',
						type: 'qz',
						status: '3'
					}, {
						name: '求购',
						type: 'qg',
						status: '4'
					},
					{
						name: '招工',
						type: 'zg',
						status: '5'
					}, {
						name: '求职',
						type: 'qzs',
						status: '6'
					},
					{
						name: '发布服务',
						type: 'ffw',
						status: '7',
					},
					{
						name: '找服务',
						type: 'zfw',
						status: '8',
					},
					{
						name: '供应链',
						type: 'gyl',
						status: '9',
					},
					{
						name: '求供应链',
						type: 'qgyl',
						status: '10',
					},
					{
						name: '商品发布',
						type: 'esfb',
						status: '11',
					},
					{
						name: '商品求购',
						type: 'esqg',
						status: '12',
					},
				],
				typeOn: 0,
				tabRight: 0,
				widthIng: 60,
				isWidth: 62,
				isLeft: 0,
				tabLeft: 0,
				page: 1,
				limit: 9,
				//模板接口字段，用于筛选
				fileds: {
					'jy': {
						'0': {
							workingGroup: 'businessForm',
							avea: 'areaRange',
							supportingFacility: 'supp',
							rent: 'rentRange',
							storefrontType: 'pavementsType',
							storeCategory: 'storeCategory',
							floor: 'floors',
							district: 'dis',
							reutLongdate: 'leases',
							transferFee: 'sellAmount',

						},
						'1': {
							district: 'dis',
							avea: 'areaRange',
							floor: 'floors',
							sellOunt: 'serviceAmount',
							storeCategory: 'storeCategory',
							returnInvestment: 'userRate',
						},
						'2': {
							workingGroup: 'businessForm',
							avea: 'areaRange',
							supportingFacility: 'supp',
							rent: 'rentRange',
							storefrontType: 'pavementsType',
							floor: 'floors',
							district: 'dis',
							reutLongdate: 'leases',
							transferFee: 'sellAmount',
							storeCategory: 'storeCategory',
						}
					},
					'qz': {
						area: {
							type: 'range',
							skey: 'areaRange',
							ekey: 'areaRanges',
							sp: '-'
						},
						storeCategory: 'storeCategory',
						rent: {
							type: 'range',
							skey: 'rentRange',
							ekey: 'rentRanges',
							sp: '-'
						},
						categoryId: 'businessForm',
						floor: 'floors',
						sspre: 'supp',
						district: 'dis',
						rentYear: 'leases',
						storefrontType: 'pavementsType',
						transferFee: 'sellAmount',
					},
					'qg': {
						area: {
							type: 'range',
							skey: 'areaRange',
							ekey: 'areaRanges',
							sp: '-'
						},
						storeCategory: 'storeCategory',
						money: 'sellAmount',
						hopeArea: 'dis',
						floor: 'floors',
						rate: 'userRate',
					},
					zg: {
						//招工
						job: 'positions',
						industry: 'industry',
						experience: {
							type: 'range',
							skey: 'rangeExperience',
							ekey: 'rangeExperiences',
							sp: '-',
						},
						salary: {
							type: 'range',
							skey: 'salaryRange',
							ekey: 'salaryRanges',
							sp: '-',
						},
						age: {
							type: 'range',
							skey: 'ageRange',
							ekey: 'ageRanges',
							sp: '-',
						},
						experience: {
							type: 'range',
							skey: 'rangeExperience',
							ekey: 'rangeExperiences',
							sp: '-',
						},
						jobMark: 'keywords',
					},
					qzs: {
						//求职
						job: 'positions',
						hopeIndustry: 'industry',
						workExperience: 'rangeExperience',
						salary: {
							type: 'range',
							skey: 'salaryRange',
							ekey: 'salaryRanges',
							sp: '-',
						},
						age: 'ageRange',
						workExperience: 'rangeExperience',
						mark: 'keywords',
					},
					ffw: {
						characteristic: 'keywords',
						typeId: 'serviceType',
						area: 'dis',
						price: 'serviceAmount',
					},
					zfw: {
						characteristic: 'keywords',
						typeId: 'serviceType',
						area: 'dis',
						price: 'serviceAmount',
					},
					gyl: {
						commodityName: 'commodityNames',
						commodityPrice: 'commodityPrice',
						commodityNum: 'commodityNum',
						category: 'commodityTypes',
						serviceCharacteristics: 'keywords'
					},
					qgyl: {
						commodityName: 'commodityNames',
						smallPrice: 'commodityPrice',
						bigPrice: ' commodityPrices',
						smallQuantities: 'commodityNum',
						largeQuantities: 'commodityNums',
						category: 'commodityTypes',
						serviceCharacteristics: 'keywords',
					},
					esfb: {
						name: 'commodityNames',
						price: 'commodityPrice',
						productNum: 'commodityNum',
						keyword: 'keywords'
					},
					esqg: {
						name: 'commodityNames',
						price: 'commodityPrice',
						productNum: 'commodityNum',
						keyword: 'keywords'
					}
				}
			}
		},
		onShow() {
			// showLoading()
			getActiveTemplate()
			this.initList()
		},
		methods: {
			toPage,
			// async getUserMatchList() {
			// 	try {
			// 		let {
			// 			data
			// 		} = await UserMatchlistApi({
			// 			limit: 3
			// 		});
			// 		this.UserMatchlist = data.list;
			// 	} catch (e) {
			// 		//TODO handle the exception
			// 	}
			// 	uni.hideLoading()
			// },
			delData(data) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除当前模板?',
					success: function(res) {
						if (res.confirm) {
							DelUserMatch(data.templateId).then(res => {
								that.$util.Tips({
									title: '删除成功'
								})
								// data.isSelected = 0;
								// this.$set(data,'isSelected','0')
								that.initList();
								// that.getNavData()
								uni.$emit('refshLease')
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			//出租 转让 出售列表

			async getOnlist(status) {
				try {
					let {
						data
					} = await OnListApi({
						page: this.page,
						status
					});
					console.log('data', data)
					this.UserMatchlist = [...this.UserMatchlist, ...data.list]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			async getList() {
				try {
					let {
						data
					} = await AllListApi({
						page: this.page,
						limit: this.limit
					});
					uni.hideLoading()
					let arr = []
					// data.list.map(item => {
					// 	item.list.map(child => {
					// 		console.log((!child.status) && child.buystoreId, child.status, child
					// 			.buystoreId)
					// 		if ((!child.status) && child.askrentId) {
					// 			child.statusCode = 2
					// 		} else if ((!child.status) && child.buystoreId) {
					// 			child.statusCode = 4
					// 		}
					// 		arr.push(child)
					// 	})
					// })
					let d = data.list.map(item => {
						if ((!item.status) && item.askrentId) {
							item.statusCode = 2
						} else if ((!item.status) && item.buystoreId) {
							item.statusCode = 4
						}
						return item;
					})
					this.UserMatchlist = [...this.UserMatchlist, ...data.list]
					uni.hideLoading()
					console.log("this.UserMatchlist", data)
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//求租，求购
			async getHirePurchase(type, data) {
				try {
					// const storeCategory = this.categoryOn != 0 ? getCategory(this.categoryOn ).value : ''
					let {
						data
					} = (type == 'qz') ? await getOnGroupListApi(data): await onBuyListApi(data);
					console.log('sj', data)
					this.UserMatchlist = [...this.UserMatchlist, ...data.list]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//求租，求购
			async getJobRec(type) {
				try {
					// const storeCategory = this.categoryOn != 0 ? getCategory(this.categoryOn ).value : ''
					let params = {
						page: this.page
					}
					let {
						data
					} = (type == 6) ? await getOnJobApi(params): await getOnRecruitApi(params);
					console.log('sj', data)
					let d = data.list.map(item => {
						item.status = type;
						return item;
					})
					this.UserMatchlist = [...this.UserMatchlist, ...d]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//求租，求购
			async getMerchant(type) {
				try {
					// const storeCategory = this.categoryOn != 0 ? getCategory(this.categoryOn ).value : ''
					let params = {
						page: this.page,
						type: type == 7 ? 0 : 1
					}
					let {
						data
					} = await OnMerchantApi(params);
					console.log('sj', data)
					let d = data.list.map(item => {
						item.status = type;
						return item;
					})
					this.UserMatchlist = [...this.UserMatchlist, ...d]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//供应链供求
			async getSupply(type) {
				try {
					// const storeCategory = this.categoryOn != 0 ? getCategory(this.categoryOn ).value : ''
					let params = {
						page: this.page,
						// type: type == 7 ? 0 : 1
					}
					let {
						data
					} = type == 9 ? await getSuppleOnList(params) : await getSuppleBegOnList(params);
					console.log('sj', data)
					let d = data.list.map(item => {
						item.status = type;
						return item;
					})
					this.UserMatchlist = [...this.UserMatchlist, ...d]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			async getProductOrBeg(type) {
				try {
					// const storeCategory = this.categoryOn != 0 ? getCategory(this.categoryOn ).value : ''
					let params = {
						page: this.page,
						status: type == 11? 0 :1
						// type: type == 7 ? 0 : 1
					}
					let {
						data
					} =  await getProduct(params);
					console.log('sj', data)
					let d = data.list.map(item => {
						item.status = type;
						item.title = item.name;
						return item;
					})
					this.UserMatchlist = [...this.UserMatchlist, ...d]
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			toAddMatch(data) {
				// console.log('data', data, this.types[this.typeOn])
				let emitData = this.filedSx(data);
				console.log('data', emitData);
				uni.$emit('initMatchLease', emitData)
				uni.navigateBack()
			},

			typeNavClick(item, index) {
				this.typeOn = index
				this.UserMatchlist = []
				this.page = 1;
				this.initList()
			},
			initList() {
				showLoading()
				console.log(this.typeOn)
				if (this.page == 1) {
					this.UserMatchlist = []
				}
				// if (this.categoryOn == 0 && this.typeOn == 0) return this.getList()
				// if ([0].includes(this.typeOn)) return this.getOnlist()
				// else if ([1, 2].includes(this.typeOn)) return this.getHirePurchase()
				if (this.types[this.typeOn].type == "all") return this.getList()
				else if (this.types[this.typeOn].type == "jy") return this.getOnlist(this.types[this.typeOn].status)
				else if (this.types[this.typeOn].type == "zg" || this.types[this.typeOn].type == "qzs") return this
					.getJobRec(this.types[this.typeOn].status)
				else if (this.types[this.typeOn].type == "ffw" || this.types[this.typeOn].type == "zfw") return this
					.getMerchant(this.types[this.typeOn].status)
				else if (this.types[this.typeOn].type == "gyl" || this.types[this.typeOn].type == "qgyl") return this
					.getSupply(this.types[this.typeOn].status)
				else if (this.types[this.typeOn].type == "esfb" || this.types[this.typeOn].type == "esqg") return this
					.getProductOrBeg(this.types[this.typeOn].status)
				else return this.getHirePurchase(this.types[this.typeOn].type, {
					page: this.page
				})
			},
			//刷新
			onRefresh() {
				this.categoryOn = 0;
				this.typeOn = 0;
				this.page = 1;
				this.initList()
			},
			//筛选字段
			filedSx(d) {
				let t = this.types[this.typeOn].type
				let tag = {}
				let nf = {}
				t = this.checkt(t, d)
				if (t == 'jy') {
					tag = this.types.filter(item => item.status == d.status)[0];
					let st = tag.status
					nf = this.fileds[t][st];
				} else {
					tag = this.types.filter(item => item.type == t)[0];
					nf = this.fileds[t];
				}
				console.log("-------tag", tag, nf)
				// console.log(nf)
				return {
					// tag,
					data: this.filedGz(nf, d),
					// sd: d
				}
			},
			checkt(t, d) {
				if (t !== 'all') {
					return t;
				}
				console.log("ddd",d)
				if (d.askrentId) {
					t = 'qz';
				} else if (d.buystoreId) {
					t = 'qg';
				} else if (d.type == 5) {
					t = 'zg';
				} else if (d.type == 6) {
					t = 'qzs';
				} else if (d.type == 7) {
					t = 'ffw';
				} else if (d.type == 8) {
					t = 'zfw';
				} else if (d.type == 9) {
					t = 'gyl';
				} else if (d.type == 10) {
					t = 'qgyl';
				} else if (d.type == 11) {
					t = 'esfb';
				} else if (d.type == 12) {
					t = 'esqg';
				} else {
					t = 'jy';
				}
				return t;
			},
			//字段规则
			filedGz(gz, data) {
				if (!data) return;
				let obj = {}
				// console.log('gz',gz)
				for (let k in gz) {
					let gzk = gz[k];
					if (typeof gzk == "string") {
						// console.log(gzk,data[k])
						obj[gzk] = data[k] ? data[k] : ' '
					} else {
						// console.log('gzk',gzk)
						if (gzk.type == 'range') {
							obj[gzk.skey] = data[k] ? data[k].split(gzk.sp)[0] : ' '
							obj[gzk.ekey] = data[k] ? data[k].split(gzk.sp)[1] : ' '
						}
					}

				}
				obj.latitude = data.latitude;
				obj.longitude = data.longitude;
				if (data.city) {
					obj.city = data.city;
				}
				if (data.district) {
					obj.district = data.district;
				}
				obj.name = data.title;
				obj.infoId = data.id || data.askrentId || data.buystoreId;
				if (data.askrentId) {
					obj.type = 3;
				} else if (data.buystoreId) {
					obj.type = 4;
				} else {
					obj.type = data.status;
				}
				console.log("dataeeeeee", data)
				return obj;
			}
		},
		onReachBottom() {
			this.page++;
			this.initList()
		}
	}
</script>

<style lang="scss">
	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 22rpx;
		}

		.type {
			display: inline-block;
			white-space: nowrap;
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.content {
		padding: 26rpx;
	}

	.statistics {
		height: 62rpx;
		line-height: 62rpx;
		font-weight: 600;

		.u_Number {
			color: rgba(238, 33, 45, 1);
			font-size: 32rpx;
		}
	}

	.title {
		margin-bottom: 50rpx;

		.title-black {
			font-size: 48rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 1);
		}

		.title-gray {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-top: 10rpx;
		}
	}

	.sanjiao-right {
		padding-right: 32rpx;
		position: relative;
	}

	.sanjiao-right::after {
		position: absolute;
		display: block;
		content: '';
		width: 12rpx;
		height: 12rpx;
		border-top: 1px solid rgba(212, 212, 212, 1);
		border-right: 1px solid rgba(212, 212, 212, 1);
		transform: rotate(45deg);
		right: 0;
		top: 50%;
		margin-top: -6rpx;
	}

	.item {
		margin-top: 30rpx;

		// .item_title {
		// 	font-size: 30rpx;
		// 	color: rgba(0, 0, 0, 1);
		// }
		.itemCon {
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;

			.item_title {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 1);
				margin-right: 10px;
			}
		}

		.info {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-top: 10rpx;
		}

		.item_icon {
			line-height: 82rpx;
			height: 82rpx;
			color: #ccc;
		}
	}

	.add_btn {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 82rpx;
		border: 2rpx dashed rgba(238, 33, 45, 1);
		margin: 40rpx auto;
		border-radius: 15rpx;
		line-height: 82rpx;
		text-align: center;
		color: rgba(238, 33, 45, 1);
		font-weight: 600;
	}
</style>